<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			#div{width: 150px;height: 150px;background: yellow;position:absolute; left:0; top:0;}
		
		</style>
	</head>
	<body>
		<a href="tuozhuai2.html">next</a>
		<div id="div"></div>
	</body>
	<script>
	class tuozhuai{
		constructor(id){
			this.oDiv=document.getElementById(id);
			this.tuo();
		}
		tuo(){
			let _this=this;
			console.log(this);
			let x=0;
			let y=0;
			_this.oDiv.onmousedown=onmousedown=function(ev){
			var ev=ev||event;
			let xx=ev.clientX-_this.oDiv.offsetLeft;
			let yy=ev.clientY-_this.oDiv.offsetTop;
			document.onmousemove=function(ev){
				var ev=ev||event;
				 x=ev.clientX-xx;
				 y=ev.clientY-yy;
				_this.oDiv.style.left=x+'px';
				_this.oDiv.style.top=y+'px';
				
			};
			document.onmouseup=function(){
				document.onmouseup=null;
				document.onmousemove=null;
			};
			return false;
		}
		}
	}
	new tuozhuai('div')
	</script>
</html>
